<template>
        <div style="display: inline-block">
            <el-select class="search-input-left" v-model="keyCode.key" @change="searchFocus" placeholder="请选择" style="width:100px" size="small">
                <el-option
                    v-for="(item,index) in keyList"
                    v-show="item.show"
                    :key="'keyList' + index"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
            <el-date-picker
                v-if="keyCode.inpuType === 'date'"
                v-model="timeList"
                value-format="yyyy-MM-dd"
                class="search-input"
                type="daterange"
                range-separator="至"
                size="small"
                placeholder="请选择日期"
                style="width:220px"
                @change="setDateKeyCode"
                clearable
            ></el-date-picker>
            <el-input
                v-else-if="keyCode.inpuType === 'input'"
                type="text"
                v-model="keyCode.text"
                class="search-input"
                placeholder="请输入"
                style="width:220px"
                size="small"
                clearable
                @keyup.enter.native="searcd"
            ></el-input>
            <el-input
                v-else-if="keyCode.inpuType === 'inputNumber'"
                type="number"
                v-model="keyCode.text"
                class="search-input"
                placeholder="请输入"
                style="width:220px"
                size="small"
                clearable
                @keyup.enter.native="searcd"
            ></el-input>
            <el-input
                v-else-if="keyCode.inpuType === 'inputTaskNum'"
                type="text"
                v-model="keyCode.taskNum"
                class="search-input"
                placeholder="请输入"
                style="width:220px"
                size="small"
                clearable
                @keyup.enter.native="searcd"
            ></el-input>
            <el-select
                v-else-if="keyCode.inpuType === 'select'"
                v-model="keyCode.text"
                class="search-input"
                placeholder="请选择"
                style="width:220px"
                size="small"
                clearable

            >
                <el-option v-for="(item,index) in enumList" :key="index" :label="item.disPlay" :value="item.code"></el-option>
            </el-select>
            <el-input
                v-else-if="keyCode.inpuType === 'inputSelect'"
                v-model="keyCode.textStr"
                class="search-input"
                placeholder="请选择"
                style="width:200px"
                size="small"
                clearable
                @focus="getPeople"
                @clear="clearByKeyCode"
                @keyup.enter.native="searcd"
            ></el-input>
        </div>
</template>

<script>

import Bus from './../bus'
import ApiTask from './../api';
export default {
    name: 'search',
    props: ['keyList'],
    data() {
        return {
            enumList: [],
            keyLists: [],
            keyCode: {
                inpuType: 'input',
                key: '',
                text: '',
                textStr: '',
                taskNum:''
            },
            timeList: [],
            nativeSet: false
        };
    },
    mounted() {
        this.keyCode.key = this.keyList.find(item => {
            return item.show
        })['value'];
    },
    methods: {
        searcd(){
          this.$emit('searchent')
          console.log('this.keyCode',this.keyCode)
        },
        clearByKeyCode() {
            let _this = this;
            _this.$set(_this.keyCode, "text", '');
        },
        getPeople() {
            let _this = this;
            parent.$.selectPeople({
                // 授权时的组织机构面板内容
                type: this.keyCode.key === 'managerDepartment' ? 'Department' : 'selectPeople',
                panels: 'Department,Team,Post,Outworker,RelatePeople',
                selectType: this.keyCode.key === 'managerDepartment' ? 'Department,Team' : 'Member',
                onlyLoginAccount: true,
                isNeedCheckLevelScope: false,//不受职务级别控制
                minSize: 1,//只能选择1个人
                maxSize: 1,//
                params: {
                    text: '',
                    value: ''
                },
                fillBackData: {},
                callback(result) {
                    _this.$set(_this.keyCode, "textStr", result.text);
                    _this.$set(_this.keyCode, "text", result.value.slice(7));
                }
            })
        },
        setDateKeyCode() {
            this.keyCode.text = this.timeList.toString();
        },
        //选择查询条件
        searchFocus() {
            this.keyCode.text = '';
            this.nativeSet = true;
            this.keyCode.textStr = '';
            switch (this.keyCode.key) {
                case 'taskLevel':
                    this.keyCode.inpuType = 'inputNumber';
                    break;
                case 'title':
                case 'taskType':
                    this.keyCode.inpuType = 'input';
                    break;
                case 'publisher':
                case 'manager':
                case 'managerDepartment':
                    this.keyCode.inpuType = 'inputSelect';
                    break;
                case 'startDate':
                case 'endTime':
                    this.timeList = [];
                    this.keyCode.inpuType = 'date';
                    break;
                case 'taskState':
                    this.getEnumList('taskState');
                    this.keyCode.inpuType = 'select';
                    break;
                case 'approveState':
                    this.getEnumList('approveState');
                    this.keyCode.inpuType = 'select';
                    break;
                case 'importantLevel':
                    this.getEnumList('importantLevel');
                    this.keyCode.inpuType = 'select';
                    break;
                case 'taskNum':
                    this.keyCode.inpuType = 'inputTaskNum';
                    break;
                default:
                    break;
            };
        },
        //获取枚举查询条件
        getEnumList(enumName) {
            ApiTask.listEnumList({enumName: enumName}).then(res => {
                const data = res.data;
                if (data.code === 0) {
                    this.enumList = data.data;
                }
            })
        }
    },
    watch: {
        keyList: {
            handler: function(val) {
                this.keyLists = val;
            },
            deep: true
        },
        'keyCode.text': function(val) {
            let param = {};
            param[this.keyCode.key] = val === '' ? undefined : val;
            Bus.$emit('setSearchParam', param);
        },
        'keyCode.taskNum': function(val) {
            let param = {};
            param[this.keyCode.key] = val === '' ? undefined : val;
            Bus.$emit('setSearchParam', param);
        },
        'keyCode.key': function(newVal, oldVal) {
            let param = {};
            param[oldVal] = undefined;
            Bus.$emit('setSearchParam', param);
            this.$emit('changeKeyCode', newVal);
        },
    }
}

</script>
<style lang="scss" scoped>
    .search-input, .search-input /deep/ input{
        border-radius: 0px 4px 4px 0;
        vertical-align: middle;
        margin-right: 10px;
    }
    .search-input-left /deep/ input{
        border-radius: 4px 0px 0px 4px;
        border-right: none;
        font-size: 12px;
    }
</style>
